/**
 * Created by shantong on 2018/4/29.
 */
import React from 'react';
import { connect } from 'react-redux'
import { Form, Icon, Input, Button, Divider } from 'antd';
import { login } from '@/api/Api.js'
import { Control } from 'react-keeper'
import '../../style/login/login.css';
const FormItem = Form.Item;


const mapStateToProps = (state, ownProps) => ({
	// todoList: state.Home.todoList,
})

const mapDispatchToProps = (dispatch, ownProps) => ({
	// toggleTodo: id => dispatch(toggleTodo(id)),
})

class Login extends React.Component {
	handleSubmit = (e) => {
		e.preventDefault();
		this.props.form.validateFieldsAndScroll((err, values) => {
			if (err) {
				return false;
			}
			console.log('Received values of form: ', values);
			login(values).then(result => {
				if (result) {
					Control.go('/admin');
				}
			});
		});
	}
	render() {
		const { getFieldDecorator } = this.props.form;
		return (
			<div className="login-wrap">
				<Form onSubmit={this.handleSubmit} className="login-form">
					<div className="login-form-title">
						<Icon type="login" /> 欢迎登录后台管理系统
					</div>
					<Divider style={{margin: '5px 0'}}/>
					<div className="login-form-body">
						<FormItem>
							{getFieldDecorator('username', {
								rules: [{ required: true, message: '请输入用户名!' }],
							})(
								<Input addonBefore={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="预览账号 guest" />
							)}
						</FormItem>
						<FormItem>
							{getFieldDecorator('password', {
								rules: [{ required: true, message: '请输入密码!' }],
							})(
								<Input addonBefore={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="预览密码 123456" />
							)}
						</FormItem>
						<div>
							<p><Button type="primary" htmlType="submit" className="login-form-button">Log in</Button></p>
							<Divider>第三方登录</Divider>
							<div className="third-login">
								<span><Icon type="qq" /></span>
								<span><Icon type="wechat" /></span>
								<span><Icon type="weibo" /></span>
							</div>
						</div>
					</div>
				</Form>
			</div>

		);
	}
}

Login = Form.create()(Login);

export default connect(
	mapStateToProps,
	mapDispatchToProps
)(Login)